<template>
  <div style="display: grid">
    <div id="logo">
      <div id="_center" class="_left">
        <h3>Giao!</h3>
        <br />
        <p>Giao 咕 力 咕 giao!</p>
      </div>

      <div id="card">
        <a-card style="width: 100%; height: 80%">
          <a-form-model
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            v-bind="layout"
          >
            <a-form-model-item has-feedback label="账号" prop="account">
              <a-input
                v-model="ruleForm.account"
                autocomplete="off"
                placeholder="请输入账号"
              >
                <a-icon
                  slot="prefix"
                  type="user"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item has-feedback label="密码" prop="password">
              <a-input
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
                placeholder="请输入密码"
              >
                <a-icon
                  slot="prefix"
                  type="lock"
                  style="color: rgba(0, 0, 0, 0.25)"
                />
              </a-input>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 15, offset: 5 }">
              <a-button
                type="primary"
                @click="submitForm('ruleForm')"
                block
                id="login_button"
              >
                登录
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </a-card>
      </div>
    </div>
    <div class="footer"><a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2022143381号-1</a></div>
  </div>

</template>

<script>
import { teacherLogin } from "../utils/api";
import { mapMutations } from "vuex";

export default {
  name: "login",
  components: {},
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入你的密码"));
      } else if (
        !/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/.test(
          value
        )
      ) {
        callback(
          new Error(
            "请输入6-20位英文字母、数字或者符号（除空格），且字母、数字和标点符号至少包含两种"
          )
        );
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入账号", trigger: "change" }],
        password: [{ validator: validatePass, trigger: "change" }],
      },
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 15 },
      },
    };
  },
  watch: {
    $route(to, from) {
      window.location.reload(); //监测到路由发生跳转时刷新一次页面
    },
  },
  methods: {
    ...mapMutations(["setTeacher"]),
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          teacherLogin(this.ruleForm).then((res) => {
            if (res.message == "登录成功！") {
              this.$store.state.userinfo = res.data;
              this.$store.state.token = res.token;
              this.$store.dispatch("setUserRouters");
              this.$router.push({ path: "/backstage" });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style>
._left {
  color: rgb(255, 255, 255);
  position: absolute;
}
#_center {
  top: 40%;
  left: 25%;
  padding: 0;
}
#_center h3 {
  font-size: 54px;
  color: rgb(255, 255, 255);
  font-weight: 700;
  float: left;
}
#_center p {
  font-size: 32px;
  font-weight: 300;
  float: left;
}
#card {
  position: absolute;
  top: 50%;
  right: 25%;
  transform: translate(50%, -45%);
  width: 450px;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#login_button:hover {
  background-color: rgb(82, 82, 218);
}
#logo {
  background: url("../assets/背景.jpg");
  background-size: 100%;
  height: 700px;
  /* position: fixed; */
  width: 100%;
  overflow-y: auto;
}
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
  background-color: rgb(233, 233, 232);
}

.footer > a {
  color: #000;
}
</style>